<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="ddp-type-contents2">

  <div class="ddp-top-flow">
    <!-- 버튼 -->
    <div class="ddp-data-form">
      <a href="#" class="ddp-btn-buttons3 type-normal" (click)="confirmShutdownTaskOpen(); $event.preventDefault();" *ngIf="isCompletedTask">{{'msg.engine.monitoring.ingestion.shutdown' | translate}}</a>
    </div>
    <!-- //버튼 -->
    <!-- navi wrap -->
    <div class="ddp-wrap-navi">
      <a href="javascript:" class="ddp-btn-back" (click)="prevTaskList()"></a>
      <span class="ddp-data-name">{{task.task_id}}</span>

    </div>
    <!-- //navi wrap -->

  </div>

  <!-- 상세 -->
  <div class="ddp-wrap-datadetail">

    <!-- detail -->
    <div class="ddp-ui-datadetail type-detail">

      <label class="ddp-label-detail">{{'msg.comm.ui.info' | translate}}</label>


      <table class="ddp-table-detail">
        <colgroup>
          <col width="160px">
          <col width="*">
        </colgroup>
        <tbody>
        <tr>
          <th>
            Queue Insertion Time
          </th>
          <td>
            {{task.queue_insertion_time}}
          </td>
        </tr>
        <tr>
          <th>
            Created Time
          </th>
          <td>
            {{task.created_time}}
          </td>
        </tr>
        <tr>
          <th>
            Host
          </th>
          <td>
            {{task.host}}
          </td>
        </tr>
        <tr>
          <th>
            Location
          </th>
          <td>
            {{task.location}}
          </td>
        </tr>
        <tr>
          <th>
            Datasource
          </th>
          <td>
            {{task.datasource}}
          </td>
        </tr>
        <tr>
          <th>
            Type
          </th>
          <td>
            {{getTypeTranslate(task.type)}}
          </td>
        </tr>

        <tr *ngIf="isKafkaTask">
          <th>
            Processed
          </th>
          <td>
            {{processed | numberCommas}}
          </td>
        </tr>
        <tr *ngIf="isKafkaTask">
          <th>
            Unparseable
          </th>
          <td>
            {{unparseable | numberCommas}}
          </td>
        </tr>
        <tr *ngIf="isKafkaTask">
          <th>
            ThrownAway
          </th>
          <td>
            {{thrownaway | numberCommas}}
          </td>
        </tr>

        </tbody>
      </table>

    </div>
    <!-- //detail -->
    <!-- detail -->
    <div class="ddp-ui-datadetail type-detail">

      <label class="ddp-label-detail">{{'msg.log.th.status' | translate}} (Log 8K)</label>


      <div class="ddp-det-status">
        <span class="ddp-data-status" [ngClass]="[getStatusClass(task.status)]">{{task.status}}</span>
      </div>
      <!-- log -->
      <div class="ddp-wrap-log">
        <div class="ddp-box-log" #scrollElf>
          {{taskLog}}
        </div>
        <!-- log option -->
        <div class="ddp-box-log-option ddp-clear">
          <!-- left -->
          <div class="ddp-left-option">
            <dl class="ddp-dl-option ddp-clear">
              <dt>Ingestion</dt>
              <dd>
                <span class="ddp-data-status" [ngClass]="[getStatusClass(task.status)]">{{task.status}}</span>
                <span class="ddp-box-status type-error">
                    <strong>2</strong> Error
                </span>
                <span class="ddp-box-status type-warning">
                    <strong>2</strong> Warning
                </span>
              </dd>
            </dl>
          </div>
          <!-- //left -->
          <!-- right -->
          <div class="ddp-right-option">
            <div class="ddp-ui-btn-log">
              <a href="javascript:" class="ddp-btn-log type-refresh" title="{{'msg.engine.monitoring.btn.refresh' | translate}}" (click)="refreshLog();"></a>
              <a href="javascript:" class="ddp-btn-log type-down" title="{{'msg.engine.monitoring.btn.download' | translate}}" (click)="logDownload();"></a>
              <a href="javascript:" class="ddp-btn-log type-newwindow" title="{{'msg.engine.monitoring.btn.newtab' | translate}}" (click)="logNewTab();"></a>
            </div>
          </div>
          <!-- //right -->

        </div>
        <!-- //log option -->

      </div>
      <!-- //log -->
    </div>
    <!-- //detail -->
    <!-- detail -->
    <div class="ddp-ui-datadetail type-detail" *ngIf="isKafkaTask">
      <label class="ddp-label-detail">Processed rows</label>
      <div class="ddp-detail-option ddp-clear">
        <div class="ddp-wrap-edit ddp-fleft">
          <label class="ddp-label-type">{{'msg.log.th.status' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option ddp-inline">
            <label class="ddp-label-checkbox">
              <input type="checkbox" name="row" value="All" checked="checked" (change)="changeRowCheckbox($event);">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">All</span>
            </label>
            <label class="ddp-label-checkbox">
              <input type="checkbox" name="row" value="Processed" checked="checked" (change)="changeRowCheckbox($event);">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">Processed</span>
            </label>
            <label class="ddp-label-checkbox">
              <input type="checkbox" name="row" value="Unparseable" checked="checked" (change)="changeRowCheckbox($event);">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">Unparseable</span>
            </label>
            <label class="ddp-label-checkbox">
              <input type="checkbox" name="row" value="ThrownAway" checked="checked" (change)="changeRowCheckbox($event);">
              <i class="ddp-icon-checkbox"></i>
              <span class="ddp-txt-checkbox">ThrownAway</span>
            </label>

          </div>
          <!-- //edit option -->
        </div>
      </div>
      <div class="ddp-box-graph" #row>
        <div class="ddp-data-empty">
          <span class="ddp-data-contents ">{{'msg.storage.ui.no.data' | translate}}</span>
        </div>
      </div>
    </div>
    <!-- //detail -->
  </div>
  <!-- //상세 -->
</div>
<div class="ddp-wrap-layout-popup" *ngIf="showShutdownConfirm">
  <div class="ddp-box-popup ddp-box-popup-type2">
    <a href="javascript:" class="ddp-btn-close" (click)="showShutdownConfirm = false"></a>
    <!-- title -->
    <div class="ddp-pop-title">{{'msg.engine.monitoring.ingestion.task.shutdown.confirm' | translate}}</div>
    <!-- //title -->

    <!-- button -->
    <div class="ddp-ui-buttons">
      <a href="javascript:" class="ddp-btn-type-popup" (click)="showShutdownConfirm = false">{{'msg.comm.btn.cancl' | translate}}</a>
      <!-- disabled 시 ddp-disabled 추가 -->
      <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" (click)="shutdownTask();">{{'msg.engine.monitoring.ingestion.shutdown' | translate}}</a>
    </div>
    <!-- //button -->
  </div>
</div>
